<template>
  <section>
    <el-row>
      <el-col :span="24">
        <!--表单-->
          <el-button type="primary" style="float:right;margin-bottom: 22px;" @click="AddRole('add')">添加角色</el-button>
        <!--表格-->
        <el-table
          :data="tableData.slice((currentPage - 1) * 10, currentPage * 10)"
          style="width: 100%;margin-bottom: 20px;"
          border>
          <el-table-column
            prop="role_name"
            label="角色名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="role_desc"
            label="角色描述"
            width="180">
          </el-table-column>
          <el-table-column
            prop="rights"
            label="菜单权限"
            width="180">
            <template scope="scope">
              <el-button type="primary" size="small" @click="editQx('rights',scope.row)">菜单权限</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="add_qx"
            label="添加权限"
            width="180">
            <template scope="scope">
              <el-button type="primary" size="small" @click="editQx('add_qx',scope.row)">添加权限</el-button>
            </template>
          </el-table-column>
            <el-table-column
            prop="del_qx"
            label="删除权限"
            width="180">
            <template scope="scope">
              <el-button type="primary" size="small" @click="editQx('del_qx',scope.row)">删除权限</el-button>
            </template>
          </el-table-column>
            <el-table-column
            prop="edit_qx"
            label="修改权限"
            width="180">
            <template scope="scope">
              <el-button type="primary" size="small" @click="editQx('edit_qx',scope.row)">修改权限</el-button>
            </template>
          </el-table-column>
            <el-table-column
            prop="query_qx"
            label="查看权限">
            <template scope="scope">
              <el-button type="primary" size="small" @click="editQx('query_qx',scope.row)">查看权限</el-button>
            </template>
          </el-table-column>
          <el-table-column label="" fixed="right" width="150">
            <template scope="scope">
              <el-button type="primary" size="small" @click="editRole('update',scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="deleteRole(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="tableData.length">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <role-edit
      :visible.sync="roleEditVisible"
      :role="role"
      :operation="operation"
      @confirm="confirmRole"
    />
    <role-qx-edit 
      :visible.sync="roleQxEditVisible"
      :menuList="menuList"
      :qx="qx"
      :role_id="select_role_id"
      :selectMenuList.sync="selectMenuList"
     />
  </section>
</template>
<script>
import debounce from 'lodash.debounce';
import { roleService } from '@/services';
import roleEdit from '@/views/organization/role/roleEdit';
import roleQxEdit from '@/views/organization/role/roleQxEdit';
export default {
    data() {
      return {
        tableData: [],
        currentPage: 1,
        roleEditVisible: false,
        roleQxEditVisible: false,
        operation: 'add',
        role: {},
        menuList: [],
        qx: '',
        selectMenuList: [],
        select_role_id:null,
      }
    },
    activated () {
       this.getRoleList();
    },
    components: { roleEdit,roleQxEdit },
    methods: {
        getRoleList: debounce(async function() {
        this.tableData = await roleService.list();

        }, 500),
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.currentPage = val;
          if (process.env.NODE_ENV !== 'production') {
          // eslint-disable-next-line
            console.log(`当前页: ${val}`);
          }
        },
        editRole (type,row) {
          this.operation = type;
          this.role = Object.assign({},row);
          this.roleEditVisible = true;
        },
       async deleteRole (row) {
          try {
            await this.$confirm('你确定要删除吗？如果删除，拥有该角色的用户将失去此角色的权限。', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            });
          await roleService.deleteRole(row);
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getRoleList();
          } catch (e) {
            console.error(e);
          }
        },
        AddRole (type) {
          this.operation = type;
          var da = {};
          this.role = Object.assign({},da);
          this.roleEditVisible = true;
        },
        confirmRole () {
         this.getRoleList();
        },
       async editQx (qx,row) {
           this.qx = qx;
           this.menuList = await roleService.getRoleQx(qx,row.role_id);
           this.selectMenuList = [];
           this.menuList.forEach(element => {
              if(element.hasMenu){
                this.selectMenuList.push(element.menu_ID);
              }

              if(element.subMenu.length>0){
                 element.subMenu.forEach(element2 => {
                    if(element2.hasMenu){
                        this.selectMenuList.push(element2.menu_ID);
                    }
                 });
              }
           });
           this.select_role_id = row.role_id;
           this.roleQxEditVisible = true;
        }
    }
}
</script>
<style>
  .el-pagination {
    text-align: center;
    margin-top: 30px;
  }
  .el-message-box__btns .cancel {
    float: right;
    margin-left: 10px;
  }
</style>